সিএসএস Width এবং Height সেট করা

একটি এলিমেন্টের width এবং height সেট করার জন্য সিএসএস width এবং height প্রোপার্টি ব্যবহার করা হয়।

এই এলিমেন্টে 70% width ব্যবহার করা হয়েছে।

এক নজরে সিএসএস ডাইমেনশন প্রোপার্টিসমূহ

width

একটি এলিমেন্টের width সেট করার জন্য ব্যবহার করা হয়।

max-width

একটি এলিমেন্টের সর্বোচ্চ(maximum) width সেট করার জন্য ব্যবহার করা হয়।

min-width

একটি এলিমেন্টের সর্বনিম্ন(minumum) width সেট করার জন্য ব্যবহার করা হয়।

height

একটি এলিমেন্টের height সেট করার জন্য ব্যবহার করা হয়।

max-height

একটি এলিমেন্টের সর্বোচ্চ(maximum) height সেট করার জন্য ব্যবহার করা হয়।

min-height

একটি এলিমেন্টের সর্বনিম্ন(minumum) height সেট করার জন্য ব্যবহার করা হয়।

স্বয়ংক্রিয়ভাবেও width এবং height সেট করা যেতে পারে। অর্থাৎ আমরা না সেট করে দিলে ব্রাউজার ডিফল্টভাবে নিজ থেকে width এবং height সেট করে নেয়। এছাড়াও দৈর্ঘ্য নির্ণয়ের বিভিন্ন একক যেমনঃ px, cm, % ইত্যাদি ব্যবহার করেও সেট করা যায়।

এই এলিমেন্টে width 100% এবং height 60px সেট করা হয়েছে।

kt_satt_skill_example_id=483

বিঃদ্রঃ width এবং height প্রোপার্টির মধ্যে padding, border এবং margin অন্তুর্ভূক্ত নয়। width এবং height প্রোপার্টি এলিমেন্টের প্যাডিং, বর্ডার এবং মার্জিনের ভিতরে width/height সেট করে।

max-width সেট করা

একটি এলিমেন্টের maximum width সেট করার জন্য max-width প্রোপার্টিটি ব্যবহার করা হয়।

দৈর্ঘ্য নির্ণয়ের বিভিন্ন একক যেমনঃ px, cm ইত্যাদি অথবা পারসেন্ট(%) ব্যবহার করে একটি এলিমেন্টের max-width সেট করা যেতে পারে। অথবা max-width এর ভ্যালু none সেট করা যেতে পারে। অর্থাৎ ডিফল্টভাবে যার কোনো কোন maximum width থাকবে না।

জেনে রাখা ভাল যে, যখন ব্রাউজার উইন্ডো থেকে এলিমেন্টের width বড় হয় তখন ব্রাউজার এলিমেন্টটিতে একটি হরিজন্টাল স্ক্রলবার যুক্ত করে নেয়।

এক্ষেত্রে max-width প্রোপার্টিটি ব্যবহার করে এই সমস্যার সমাধান করা যায়।

বিঃদ্রঃ আমাদের এই অধ্যায়ে ব্যবহৃত div দুটির মধ্যে পার্থক্য দেখার জন্য ব্রাউজার উইন্ডোর প্রস্থ(width) ৫০০px থেকে ছোট করুন।

এই এলিমেন্টটিতে height 100px এবং max-width 500px সেট করা হয়েছে

বিঃদ্রঃ max-width প্রোপার্টির ভ্যালু width প্রোপার্টির ভ্যালুকে ওভাররাইড(override) করে।

kt_satt_skill_example_id=485